<template>
  <Panel title="个人资料">
    <div slot="container" class="py-2 px-4">
      <div class="grid md:grid-cols-2 gap-4">
        <div
          class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1"
        >
          <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
            <p>
              <label for="name" class="bg-white text-gray-600 px-1">名字</label>
            </p>
          </div>
          <p>
            <input
              id="name"
              autocomplete="false"
              tabindex="0"
              type="text"
              class="py-1 px-1 text-gray-900 outline-none block h-full w-full"
            />
          </p>
        </div>
        <div class="flex items-center text-sm text-gray-500">
          用户名来源于微信返回
        </div>

        <div
          class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1"
        >
          <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
            <p>
              <label for="name" class="bg-white text-gray-600 px-1"
                >GitHub Name</label
              >
            </p>
          </div>
          <p>
            <input
              id="name"
              autocomplete="false"
              tabindex="0"
              type="text"
              class="py-1 px-1 text-gray-900 outline-none block h-full w-full"
            />
          </p>
        </div>
        <div class="flex items-center text-sm text-gray-500">
          请跟 GitHub 上保持一致,如 zhaopengme
        </div>

        <div
          class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1"
        >
          <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
            <p>
              <label for="name" class="bg-white text-gray-600 px-1"
                >微博用户名</label
              >
            </p>
          </div>
          <p>
            <input
              id="name"
              autocomplete="false"
              tabindex="0"
              type="text"
              class="py-1 px-1 text-gray-900 outline-none block h-full w-full"
            />
          </p>
        </div>
        <div class="flex items-center text-sm text-gray-500">
          请跟微博上保持一致, 如 joypen
        </div>

        <div
          class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1"
        >
          <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
            <p>
              <label for="name" class="bg-white text-gray-600 px-1"
                >个人网站</label
              >
            </p>
          </div>
          <p>
            <input
              id="name"
              autocomplete="false"
              tabindex="0"
              type="text"
              class="py-1 px-1 text-gray-900 outline-none block h-full w-full"
            />
          </p>
        </div>
        <div class="flex items-center text-sm text-gray-500">
          如：example.com，不需要加前缀 https://
        </div>

        <div
          class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1"
        >
          <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
            <p>
              <label for="name" class="bg-white text-gray-600 px-1"
                >个人简介</label
              >
            </p>
          </div>
          <p>
            <textarea
              id="name"
              autocomplete="false"
              tabindex="0"
              type="text"
              class="py-1 px-1 text-gray-900 outline-none block h-full w-full"
            ></textarea>
          </p>
        </div>
        <div class="flex items-center text-sm text-gray-500">
          请一句话介绍你自己，大部分情况下会在你的头像和名字旁边显示
        </div>
      </div>
      <div class="mt-6">
        <a
          href="#"
          class="py-2 px-2 bg-gray-700 text-gray-100 rounded-lg hover:bg-gray-900 font-medium"
          >应用修改</a
        >
      </div>
    </div>
  </Panel>
</template>
<script>
import Panel from "../../components/uicomponents/Panel";

export default {
  components: { Panel },
};
</script>
